<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; Panel Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class Panel
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                <span class="extends"> Extends
                    <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
                

                A Panel is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements.A Panel is responsible for sizing and positioning its elements.The elements of a panel are drawn in the order in which they appear in the <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> collection.<p>The <a href="../symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="../symbols/Node.html" class="linkConstructor">Node</a> and <a href="../symbols/Link.html" class="linkConstructor">Link</a>.<p>Every Panel has a <a href="../symbols/Panel.html#type" class="linkProperty">type</a> and establishes its own coordinate system. The type of a Paneldetermines how it will size and arrange its elements:<ul><li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li><li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li><li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li><li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a>and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel.</li><li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the differentelements' <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>,and <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li><li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel    to organize a collection of elements as a row or as a column in a table.</li><li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li><li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.    The elements must be <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li><li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="../symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li></ul>Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:<pre>// Either:$(go.Panel, go.Panel.Horizontal, ...// Or:$(go.Panel, "Horizontal", ...// Full example:$(go.Panel, "Horizontal",  { width: 60, height: 60 }, // panel properties  // elements in the panel:  $(go.Shape, "Rectangle", { stroke: "lime" }),  $(go.TextBlock, "Some Text")) // end of panel definition </pre><p class="boxread">For an overview of all Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>and <a href="../../intro/tablePanels.html">Table Panels</a>.<p><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjectsvertically above each other or horizontally next to each other.  Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or<a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size.<p><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first elementwith <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true.  If there is no such element, it uses the first element as the "main" one.Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element.Use the <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels."Spot" and "Auto" Panels should have two or more elements in them.<p>In <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>properties on each element.  The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are alsouseful when an element's table cell is larger than that element.Please read <a href="../../intro/tablePanels.html">Table Panels</a> for more examples and explanation.<p><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel.They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model dataprovided in an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>. You will still need to specify properties on the individual elements within a TableRowor TableColumn as if they were immediate elements of the containing Table panel.<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.<p><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.<pre>$(go.Diagram, "myDiagramDiv",  { . . .    grid: $(go.Panel, "Grid",            { gridCellSize: new go.Size(40, 40) },            $(go.Shape, "LineH", { stroke: "lightgray" }),            $(go.Shape, "LineV", { stroke: "lightgray" })          ),    . . .  });</pre>Or to get a green bar effect:<pre>$(go.Diagram, "myDiagramDiv",  { . . .    grid: $(go.Panel, "Grid",            { gridCellSize: new go.Size(100, 100) },            $(go.Shape, "BarH", { fill: "lightgreen", height: 50 })          ),    . . .  });</pre>But Grid Panels can also be stand alone objects:<pre>$(go.Node, go.Panel.Grid,  { gridCellSize: new go.Size(6, 6), width: 60, height: 60 },  $(go.Shape, "LineH", { stroke: "gray" }),  $(go.Shape, "LineV", { stroke: "gray" }))</pre><p>A Grid Panel's elements do not participate in object picking.<h3>Changing and accessing elements of a Panel</h3><p>You can change the collection of <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>.You can get direct access to a particular element by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>.<p>You can search the visual tree of a Panel for GraphObjects that given a <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using <a href="../symbols/Panel.html#findObject" class="linkMethod">findObject</a>.<h3>Panel Size and Appearance</h3><p>Panels typically compute their own size based on their elements and Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a>,but can also be sized by setting <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>.Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,especially in the cases of nested elements having a <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap.<p>Panels have no visual components of their own unless a <a href="../symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specifiedor separators are specified either as defaults for the whole Table Panel or on individual <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.<p>In addition to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels,several Panel properties only apply to specific Panel types.<ul>  <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>, <a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a>, <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>,<a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a>, <a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a>, <a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a>, and all of the "default" separator properties.</li>  <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects,      instead they are only to be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers      that hold elements for their parent table, and ignore their own scale and angle.</li>  <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">gridCellSize</a> and <a href="../symbols/Panel.html#gridOrigin" class="linkProperty">gridOrigin</a> properties.</li>  <li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">viewboxStretch</a> property.</li></ul><p class="boxread">For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a><h3>Data Binding</h3><p>Panels also provide fundamental support for data binding.When a diagram gets a new model or when a diagram's model is augmented with additional data,the diagram automatically creates a new Node or Link whose <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property refers to the correspondingnode data or link data object.<p class="boxread">For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>and <a href="../../intro/dataBinding.html">Data Binding</a>.<p>Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.This is achieved by setting or binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, which acts in a manner similarto the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property.You can supply an <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a>, which must itself be a simple Panel, which is copied to create the elementin this container Panel corresponding to an item in the itemArray.This property is analogous to the <a href="../symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram thetemplate must be a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>.<p>Much like the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> supports having multiple templates,so that the actual structure of the element created for a data item can be chosen dynamically.Just as the <a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>is copied to create a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, the <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> names the data property whose valuechooses the Panel in the itemTemplateMap to copy for the item.<p>When binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and itscontents are copied, not shared.  Or more generally, to customize the model's copying processes, youcan supply a custom <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>.<p class="boxread">For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Panel.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                Panel(type)
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>Constructs an empty Panel of the given <a href="../symbols/Panel.html#type" class="linkProperty">type</a>.<span class="nodetails" id="xconPanel"><a class="morelink" onclick="hst('conPanel')">More...</a></span> <span class="details" id="conPanel"> Default type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.The panel type must be one of the enumerated values defined on the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> class, including:<a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>, <a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a>, <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a>, <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>,<a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a>, <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a>, or <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a>.</span>
                        
                            <dl class="detailList">
                            <dt class="heading">Parameters:</dt>
                            
                                <dt>
                                    <span class="light fixedFont">{EnumValue=}</span>  <b>type</b>
                                    
                                </dt>
                                    <dd>If not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd>
                            
                            </dl>
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Panel.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="columnCount" >
                
                <td class="name">
                  <div class="name">
                    columnCount
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>This read-only property returns the number of columns in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnCount"><a class="morelink" onclick="hst('propcolumnCount')">More...</a></span> <span class="details" id="propcolumnCount">This value is only valid after the Panel has been measured.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="columnSizing" >
                
                <td class="name">
                  <div class="name">
                    columnSizing
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how this Panel's columns deal with extra spaceif the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnSizing"><a class="morelink" onclick="hst('propcolumnSizing')">More...</a></span> <span class="details" id="propcolumnSizing">Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>.The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li>
                            
                                <li><a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="data" >
                
                <td class="name">
                  <div class="name">
                    data
                  </div>
                  <div class="attributes">
                    <span class="light">{Object}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the optional model data to which this panel is data-bound.<span class="nodetails" id="xpropdata"><a class="morelink" onclick="hst('propdata')">More...</a></span> <span class="details" id="propdata">The data must be a JavaScript Object if this is a <a href="../symbols/Part.html" class="linkConstructor">Part</a>.The data can be any JavaScript value if this is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> created foran item in an Array that was data-bound by the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property.The default value is null.</span><div class="details" id="dpropdata"><p>Setting it to a new value automatically calls <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">updateTargetBindings</a>in order to assign new values to all of the data-bound GraphObject properties.<p>Once you set this property you cannot add, remove, or modify any data bindingson any of the GraphObjects in the visual tree of this Panel, including onthis panel itself.<p>You should not modify this property on a <a href="../symbols/Part.html" class="linkConstructor">Part</a> that is created automaticallyto represent model data, nor on a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that is created automatically for a data itemin the containing Panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.Call <a href="../symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a> and <a href="../symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a> if you want to replacethis Part with another one, or call <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a> and <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>if you want to replace this Panel with another one.<p>Although you might not be able to replace this data value if this Part was createdautomatically by the Diagram, you can still modify that data object's properties.Call the appropriate Model method for changing properties that affect the structure of the diagram.Call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a> for changing other properties that may be the sourcesof <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s on <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties that are in the visual tree of this panel/part.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultAlignment" >
                
                <td class="name">
                  <div class="name">
                    defaultAlignment
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default alignment spot of this Panel, used asthe alignment for an element when its <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<span class="nodetails" id="xpropdefaultAlignment"><a class="morelink" onclick="hst('propdefaultAlignment')">More...</a></span> <span class="details" id="propdefaultAlignment">The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, which is interpreted by the Panel in whatever manner seems reasonable,depending on the Panel type.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultColumnSeparatorDashArray" >
                
                <td class="name">
                  <div class="name">
                    defaultColumnSeparatorDashArray
                  </div>
                  <div class="attributes">
                    <span class="light">{Array.<number>}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default dash array for a column's separator in a Table Panel.<span class="nodetails" id="xpropdefaultColumnSeparatorDashArray"><a class="morelink" onclick="hst('propdefaultColumnSeparatorDashArray')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorDashArray"><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.</span><div class="details" id="dpropdefaultColumnSeparatorDashArray"><p>Must be an array of positive numbers and zeroes,or else null to indicate a solid line.<p>For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.<p>Setting an array with all zeroes will set the value to null.<p>Default is null.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorDashArray" class="linkProperty">RowColumnDefinition.separatorDashArray</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorDashArray" class="linkProperty">defaultRowSeparatorDashArray</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultColumnSeparatorStroke" >
                
                <td class="name">
                  <div class="name">
                    defaultColumnSeparatorStroke
                  </div>
                  <div class="attributes">
                    <span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default stroke (color) for columns in a Table Panelprovided a given column has a nonzero <a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a>.<span class="nodetails" id="xpropdefaultColumnSeparatorStroke"><a class="morelink" onclick="hst('propdefaultColumnSeparatorStroke')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorStroke"><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a> can override this default value.The default value is null -- no line is drawn.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorDashArray" class="linkProperty">defaultColumnSeparatorDashArray</a></li>
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorStroke" class="linkProperty">defaultRowSeparatorStroke</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultColumnSeparatorStrokeWidth" >
                
                <td class="name">
                  <div class="name">
                    defaultColumnSeparatorStrokeWidth
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default stroke width for a column's separator in a Table Panel.<span class="nodetails" id="xpropdefaultColumnSeparatorStrokeWidth"><a class="morelink" onclick="hst('propdefaultColumnSeparatorStrokeWidth')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorStrokeWidth"><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.The default value is 1.  Any new value must be a real, non-negative number.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultRowSeparatorDashArray" >
                
                <td class="name">
                  <div class="name">
                    defaultRowSeparatorDashArray
                  </div>
                  <div class="attributes">
                    <span class="light">{Array.<number>}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default dash array for a row's separator in a Table Panel.<span class="nodetails" id="xpropdefaultRowSeparatorDashArray"><a class="morelink" onclick="hst('propdefaultRowSeparatorDashArray')">More...</a></span> <span class="details" id="propdefaultRowSeparatorDashArray"><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.</span><div class="details" id="dpropdefaultRowSeparatorDashArray"><p>Must be an array of positive numbers and zeroes,or else null to indicate a solid line.<p>For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.<p>Setting an array with all zeroes will set the value to null.<p>Default is null.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorDashArray" class="linkProperty">RowColumnDefinition.separatorDashArray</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorDashArray" class="linkProperty">defaultColumnSeparatorDashArray</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultRowSeparatorStroke" >
                
                <td class="name">
                  <div class="name">
                    defaultRowSeparatorStroke
                  </div>
                  <div class="attributes">
                    <span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default stroke (color) for rows in a Table Panelprovided a given row has a nonzero <a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a>.<span class="nodetails" id="xpropdefaultRowSeparatorStroke"><a class="morelink" onclick="hst('propdefaultRowSeparatorStroke')">More...</a></span> <span class="details" id="propdefaultRowSeparatorStroke"><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a> can override this default value.The default value is null -- no line is drawn.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorDashArray" class="linkProperty">defaultRowSeparatorDashArray</a></li>
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorStroke" class="linkProperty">defaultColumnSeparatorStroke</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultRowSeparatorStrokeWidth" >
                
                <td class="name">
                  <div class="name">
                    defaultRowSeparatorStrokeWidth
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default stroke width for a row's separator in a Table Panel.<span class="nodetails" id="xpropdefaultRowSeparatorStrokeWidth"><a class="morelink" onclick="hst('propdefaultRowSeparatorStrokeWidth')">More...</a></span> <span class="details" id="propdefaultRowSeparatorStrokeWidth"><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.The default value is 1.  Any new value must be a real, non-negative number.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultSeparatorPadding" >
                
                <td class="name">
                  <div class="name">
                    defaultSeparatorPadding
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Margin.html" class="linkConstructor">Margin</a>}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the additional padding for rows and columns in a Table Panel.<span class="nodetails" id="xpropdefaultSeparatorPadding"><a class="morelink" onclick="hst('propdefaultSeparatorPadding')">More...</a></span> <span class="details" id="propdefaultSeparatorPadding">Padding is applied both before and after a row or column's contents.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#separatorPadding" class="linkProperty">RowColumnDefinition.separatorPadding</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
                            
                                <li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="defaultStretch" >
                
                <td class="name">
                  <div class="name">
                    defaultStretch
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default stretch of this Panel, used asthe stretch for an element when its <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>.<span class="nodetails" id="xpropdefaultStretch"><a class="morelink" onclick="hst('propdefaultStretch')">More...</a></span> <span class="details" id="propdefaultStretch">The default value is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>, which typically resolves to <a href="../symbols/GraphObject.html#None" class="linkConstant">GraphObject.None</a>.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="elements" >
                
                <td class="name">
                  <div class="name">
                    elements
                  </div>
                  <div class="attributes">
                    <span class="light">{Iterator.<GraphObject>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>This read-only property returns an iterator over the collection of the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that this panel manages.<span class="nodetails" id="xpropelements"><a class="morelink" onclick="hst('propelements')">More...</a></span> <span class="details" id="propelements"></span><div class="details" id="dpropelements"><p>You can change the collection by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>.<p>You can also get direct access to individual elements by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="gridCellSize" >
                
                <td class="name">
                  <div class="name">
                    gridCellSize
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the distance between lines in a <a href="../symbols/Panel.html#Grid" class="linkConstant">Grid</a> panel.<span class="nodetails" id="xpropgridCellSize"><a class="morelink" onclick="hst('propgridCellSize')">More...</a></span> <span class="details" id="propgridCellSize">The units are in local coordinates.The default is 10x10.  Any new width or height must be a positive real number.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="gridOrigin" >
                
                <td class="name">
                  <div class="name">
                    gridOrigin
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets an origin point for the grid cells in a <a href="../symbols/Panel.html#Grid" class="linkConstant">Grid</a> panel.<span class="nodetails" id="xpropgridOrigin"><a class="morelink" onclick="hst('propgridOrigin')">More...</a></span> <span class="details" id="propgridOrigin">The units are in local coordinates.The default is (0,0).  Any new value must use real numbers.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="itemArray" >
                
                <td class="name">
                  <div class="name">
                    itemArray
                  </div>
                  <div class="attributes">
                    <span class="light">{Array}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a JavaScript Array of values or objects, each of which will be representedby a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as elements in this Panel.<span class="nodetails" id="xpropitemArray"><a class="morelink" onclick="hst('propitemArray')">More...</a></span> <span class="details" id="propitemArray">Replacing this array results all of this panel's child objects being replaced witha copy of the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> found in <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> for each particularitem in the Array.</span><div class="details" id="dpropitemArray"><p>Because the software does not receive any notifications when an Array is modified,any insertions or removals or replacements of data in the Array will not be noticedunless you call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>.<p>When binding this property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied,the item Array and its contents are copied, not shared.Or more generally, to customize the model's copying processes, you can supply a custom<a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a> and perhaps a <a href="../symbols/GraphLinksModel.html#copyLinkDataFunction" class="linkProperty">GraphLinksModel.copyLinkDataFunction</a>.<p>Any JavaScript Object that is in this Array must only appear once in the arrayand must not appear in any other <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>s.Use <a href="../symbols/Panel.html#findItemPanelForData" class="linkMethod">findItemPanelForData</a> to find the data-bound Panel created for an Object in this panel's item Array.<p>Non-Object values in an item Array may appear multiple times.An item Array may be shared by multiple Panels.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="itemCategoryProperty" >
                
                <td class="name">
                  <div class="name">
                    itemCategoryProperty
                  </div>
                  <div class="attributes">
                    <span class="light">{string|function(*):string}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the name of the item data property that returns a string describing that data's category,or a function that takes an item data object and returns that string;the default value is the name 'category'.<span class="nodetails" id="xpropitemCategoryProperty"><a class="morelink" onclick="hst('propitemCategoryProperty')">More...</a></span> <span class="details" id="propitemCategoryProperty">This is used to distinguish between differentkinds of items in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.</span><div class="details" id="dpropitemCategoryProperty"><p>The name must not be null.If the value is an empty string, the category is assumed to be an empty string,the default category name, for all item data objects.You must not change this property when the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> already has a value.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="itemIndex" >
                
                <td class="name">
                  <div class="name">
                    itemIndex
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                      <span class="since" title="since">1.4</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the index of this Panel's data if it was created to represent an item in its containing Panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.<span class="nodetails" id="xpropitemIndex"><a class="morelink" onclick="hst('propitemIndex')">More...</a></span> <span class="details" id="propitemIndex">The default value is NaN.</span><div class="details" id="dpropitemIndex"><p>This is only set internally by code such as <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a> or <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>when building or shifting Panel representing itemsin the Panel whose <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a> was set or bound to an Array of value.<p>This property can be used in data bindings within the item template to produce valuesthat depend on its position in the item Array.For example:<pre> $(go.Panel, // the item Panel   . . .,   new go.Binding("itemArray", "someProperty"),   {     itemTemplate:       $(go.Panel,         // set Panel.background to a color based on the Panel.itemIndex         new go.Binding("background", "itemIndex",                        // using this conversion function                        function(i) { return (i%2 === 0) ? "lightgreen" : "lightyellow"; })                  // bound to this Panel itself, not to the Panel.data item                  .ofObject(),         $(go.TextBlock,  // a trivial item template, just showing some text           new go.Binding("text"))  // sets TextBlock.text = data.text       )   } )</pre><p>The main element of a Spot or Auto or Link Panel, or the first TableRow or TableColumn element of a Table Panelwhose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a> property is true, will not have this property set to a number,because it will not have been created by <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="itemTemplate" >
                
                <td class="name">
                  <div class="name">
                    itemTemplate
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the default <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> template used as the archetypefor item data that are in <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.<span class="nodetails" id="xpropitemTemplate"><a class="morelink" onclick="hst('propitemTemplate')">More...</a></span> <span class="details" id="propitemTemplate"></span><div class="details" id="dpropitemTemplate"><p>Setting this property just modifies the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>by replacing the entry named with the empty string.Any new value must be a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> but not a <a href="../symbols/Part.html" class="linkConstructor">Part</a>.By default this property is null.<p><a href="../symbols/GraphObject.html#copy" class="linkMethod">GraphObject.copy</a> when copying a panel will share the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>between the original panel and the copied panel.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="itemTemplateMap" >
                
                <td class="name">
                  <div class="name">
                    itemTemplateMap
                  </div>
                  <div class="attributes">
                    <span class="light">{Map.<string,Panel>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets a <a href="../symbols/Map.html" class="linkConstructor">Map</a> mapping template names to <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s.<span class="nodetails" id="xpropitemTemplateMap"><a class="morelink" onclick="hst('propitemTemplateMap')">More...</a></span> <span class="details" id="propitemTemplateMap">One of these Panels is copied for each item data that is in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.Replacing this map will automatically rebuild all of the elements in this Panel.</span><div class="details" id="dpropitemTemplateMap"><p>By default this property is null.All values in the <a href="../symbols/Map.html" class="linkConstructor">Map</a> must be <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s but not <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.<p>If you modify this <a href="../symbols/Map.html" class="linkConstructor">Map</a>, by replacing a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or by adding orremoving a map entry, you need to explicitly call <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a> afterwards.<p><a href="../symbols/GraphObject.html#copy" class="linkMethod">GraphObject.copy</a> when copying a panel will share the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>between the original panel and the copied panel.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="leftIndex" >
                
                <td class="name">
                  <div class="name">
                    leftIndex
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the first column that this Panel of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> displays.<span class="nodetails" id="xpropleftIndex"><a class="morelink" onclick="hst('propleftIndex')">More...</a></span> <span class="details" id="propleftIndex">The default value is 0.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="padding" >
                
                <td class="name">
                  <div class="name">
                    padding
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Margin.html" class="linkConstructor">Margin</a>|number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the space between this Panel's border and its content, depending on the type of panel.<span class="nodetails" id="xproppadding"><a class="morelink" onclick="hst('proppadding')">More...</a></span> <span class="details" id="proppadding">Unlike <a href="../symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a>, padding expands the area inside of the Panel's border.</span><div class="details" id="dproppadding"><p>Padding cannot contain negative numbers.The default value is a <a href="../symbols/Margin.html" class="linkConstructor">Margin</a> of zero.</div>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="rowCount" >
                
                <td class="name">
                  <div class="name">
                    rowCount
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>This read-only property returns the number of rows in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xproprowCount"><a class="morelink" onclick="hst('proprowCount')">More...</a></span> <span class="details" id="proprowCount">This value is only valid after the Panel has been measured.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="rowSizing" >
                
                <td class="name">
                  <div class="name">
                    rowSizing
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how this Panel's rows deal with extra spaceif the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xproprowSizing"><a class="morelink" onclick="hst('proprowSizing')">More...</a></span> <span class="details" id="proprowSizing">Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>.The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li>
                            
                                <li><a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="topIndex" >
                
                <td class="name">
                  <div class="name">
                    topIndex
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the first row that this Panel of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> displays.<span class="nodetails" id="xproptopIndex"><a class="morelink" onclick="hst('proptopIndex')">More...</a></span> <span class="details" id="proptopIndex">The default value is 0.</span>
                
                    <div class="seealso">See also:
                        <ul class="seealsolist">
                            
                                <li><a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a></li>
                            
                        </ul>
                    </div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="type" >
                
                <td class="name">
                  <div class="name">
                    type
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the type of the Panel, which controls how the Panel's elements are measured and arranged.<span class="nodetails" id="xproptype"><a class="morelink" onclick="hst('proptype')">More...</a></span> <span class="details" id="proptype">The only accepted values are listed as constant properties of Panel, including:<ul><li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a></li><li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a></li><li><a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a></li><li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a></li><li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a></li><li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a></li><li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a></li><li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> (see also <a href="../symbols/Link.html" class="linkConstructor">Link</a>s, which are all Panels of type Link)</li><li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a></li><li><a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a></li><li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a></li></ul>The default value is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</span><div class="details" id="dproptype"><p>You must not modify this property once the Panel has been measured or the Panel has been added to another Panel.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="viewboxStretch" >
                
                <td class="name">
                  <div class="name">
                    viewboxStretch
                  </div>
                  <div class="attributes">
                    <span class="light">{EnumValue}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets how a <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Viewbox</a> panel will resize its content.<span class="nodetails" id="xpropviewboxStretch"><a class="morelink" onclick="hst('propviewboxStretch')">More...</a></span> <span class="details" id="propviewboxStretch"></span><div class="details" id="dpropviewboxStretch"><p>Possible values are <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a> and <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">GraphObject.UniformToFill</a>.The default is <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a>.</div>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Properties borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a>, <a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a>, <a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a>, <a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a>, <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>, <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a>, <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a>, <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>, <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a>, <a href="../symbols/GraphObject.html#background" class="linkProperty">background</a>, <a href="../symbols/GraphObject.html#click" class="linkProperty">click</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">column</a>, <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">columnSpan</a>, <a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a>, <a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">contextMenu</a>, <a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a>, <a href="../symbols/GraphObject.html#Default" class="linkConstant">Default</a>, <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>, <a href="../symbols/GraphObject.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">Fill</a>, <a href="../symbols/GraphObject.html#fromEndSegmentDirection" class="linkProperty">fromEndSegmentDirection</a>, <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a>, <a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a>, <a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a>, <a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a>, <a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a>, <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a>, <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>, <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a>, <a href="../symbols/GraphObject.html#layer" class="linkProperty">layer</a>, <a href="../symbols/GraphObject.html#margin" class="linkProperty">margin</a>, <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a>, <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a>, <a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a>, <a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a>, <a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a>, <a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a>, <a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a>, <a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a>, <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a>, <a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a>, <a href="../symbols/GraphObject.html#name" class="linkProperty">name</a>, <a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a>, <a href="../symbols/GraphObject.html#None" class="linkConstant">None</a>, <a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a>, <a href="../symbols/GraphObject.html#panel" class="linkProperty">panel</a>, <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a>, <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>, <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a>, <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>, <a href="../symbols/GraphObject.html#row" class="linkProperty">row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">rowSpan</a>, <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a>, <a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a>, <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a>, <a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a>, <a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a>, <a href="../symbols/GraphObject.html#shadowVisible" class="linkProperty">shadowVisible</a>, <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a>, <a href="../symbols/GraphObject.html#toEndSegmentDirection" class="linkProperty">toEndSegmentDirection</a>, <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a>, <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a>, <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a>, <a href="../symbols/GraphObject.html#toolTip" class="linkProperty">toolTip</a>, <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a>, <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">Uniform</a>, <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">UniformToFill</a>, <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>, <a href="../symbols/GraphObject.html#width" class="linkProperty">width</a></dd>
                </dl>
                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Panel.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="add">
                <td class="name">
                  
                  <div class="name">
                    add(element)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Adds a GraphObject to the end of this Panel's list of elements, visually in front of all of the other elements.<span class="nodetails" id="xmethadd"><a class="morelink" onclick="hst('methadd')">More...</a></span> <span class="details" id="methadd"></span><div class="details" id="dmethadd"><p>If the element to be added is already in this Panel's list of elements,the object is moved to the end of the list.You cannot add a GraphObject to a Panel if that GraphObject is already in a different Panel.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
                                          
                                      </dt>
                                      <dd>A GraphObject.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="copy">
                <td class="name">
                  
                  <div class="name">
                    copy()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Creates a deep copy of this Panel and returns it.
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="elt">
                <td class="name">
                  
                  <div class="name">
                    elt(idx)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Returns the GraphObject in this Panel's list of elements at the specified index.<span class="nodetails" id="xmethelt"><a class="morelink" onclick="hst('methelt')">More...</a></span> <span class="details" id="methelt"></span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findColumnForLocalX">
                <td class="name">
                  
                  <div class="name">
                    findColumnForLocalX(x)
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Returns the cell at a given x-coordinate in local coordinates.<span class="nodetails" id="xmethfindColumnForLocalX"><a class="morelink" onclick="hst('methfindColumnForLocalX')">More...</a></span> <span class="details" id="methfindColumnForLocalX">Call <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">GraphObject.getLocalPoint</a> to convert a Point in document coordinates intoa Point in local coordinates.</span><div class="details" id="dmethfindColumnForLocalX"><p>If this Panel is not a Table Panel, this method returns -1.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Panel.html#findRowForLocalY" class="linkMethod">findRowForLocalY</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>x</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{number}</span> a zero-based integer</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findItemPanelForData">
                <td class="name">
                  
                  <div class="name">
                    findItemPanelForData(data)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
                    
                      <span class="since" title="since">1.6</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Return the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that was made for a particular data object in this panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.<span class="nodetails" id="xmethfindItemPanelForData"><a class="morelink" onclick="hst('methfindItemPanelForData')">More...</a></span> <span class="details" id="methfindItemPanelForData">If this returns a Panel, its <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property will be the argument data object,and its containing <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a> will be this panel.</span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <b>data</b>
                                          
                                      </dt>
                                      <dd>must be an Object, not a string or a number or a boolean or a function</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span> or null if not found</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findMainElement">
                <td class="name">
                  
                  <div class="name">
                    findMainElement()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
                    
                      <span class="since" title="since">1.5</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Return an immediate child element whose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> is true,or else just return the first child element.
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> this may return null if there are no child elements</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findObject">
                <td class="name">
                  
                  <div class="name">
                    findObject(name)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Search the visual tree starting at this Panel for a GraphObjectwhose <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> is the given name.<span class="nodetails" id="xmethfindObject"><a class="morelink" onclick="hst('methfindObject')">More...</a></span> <span class="details" id="methfindObject"></span><div class="details" id="dmethfindObject"><p>This does not recurse into the elements inside a Panel that holds elements for an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string}</span> <b>name</b>
                                          
                                      </dt>
                                      <dd>The name to search for, using a case-sensitive string comparison.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> If no such named object can be found, this returns null.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findRowForLocalY">
                <td class="name">
                  
                  <div class="name">
                    findRowForLocalY(y)
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                      <span class="since" title="since">1.2</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Returns the row at a given y-coordinate in local coordinates.<span class="nodetails" id="xmethfindRowForLocalY"><a class="morelink" onclick="hst('methfindRowForLocalY')">More...</a></span> <span class="details" id="methfindRowForLocalY">Call <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">GraphObject.getLocalPoint</a> to convert a Point in document coordinates intoa Point in local coordinates.</span><div class="details" id="dmethfindRowForLocalY"><p>If this Panel is not a Table Panel, this method returns -1.</div>
                 
                                </p><div class="seealso">See also:
                  <ul class="seealsolist">
                                  
                                    <li><a href="../symbols/Panel.html#findColumnForLocalX" class="linkMethod">findColumnForLocalX</a></li>
                                
                  </ul></div>
                            
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>y</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{number}</span> a zero-based integer</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="getColumnDefinition">
                <td class="name">
                  
                  <div class="name">
                    getColumnDefinition(idx)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Gets the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular column in this Table Panel.<span class="nodetails" id="xmethgetColumnDefinition"><a class="morelink" onclick="hst('methgetColumnDefinition')">More...</a></span> <span class="details" id="methgetColumnDefinition">If you ask for the definition of a column at or beyond the <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>,it will automatically create one and return it.</span><div class="details" id="dmethgetColumnDefinition"><p>If this Panel is not a Table Panel, this method returns null.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the non-negative zero-based integer column index.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="getRowDefinition">
                <td class="name">
                  
                  <div class="name">
                    getRowDefinition(idx)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Gets the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethgetRowDefinition"><a class="morelink" onclick="hst('methgetRowDefinition')">More...</a></span> <span class="details" id="methgetRowDefinition">If you ask for the definition of a row at or beyond the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>,it will automatically create one and return it.</span><div class="details" id="dmethgetRowDefinition"><p>If this Panel is not a Table Panel, this method returns null.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the non-negative zero-based integer row index.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="insertAt">
                <td class="name">
                  
                  <div class="name">
                    insertAt(index, element)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Adds a GraphObject to the Panel's list of elements at the specified index.<span class="nodetails" id="xmethinsertAt"><a class="morelink" onclick="hst('methinsertAt')">More...</a></span> <span class="details" id="methinsertAt"></span><div class="details" id="dmethinsertAt"><p>If the element to be added is already in this Panel's list of elements,the object is moved to the specified index.You cannot add a GraphObject to a Panel that if that GraphObject is already in a different Panel.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>index</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
                                          
                                      </dt>
                                      <dd>A GraphObject.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="rebuildItemElements">
                <td class="name">
                  
                  <div class="name">
                    rebuildItemElements()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Create and add new GraphObjects corresponding to and bound to the data in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>,after removing all existing elements from this Panel.<span class="nodetails" id="xmethrebuildItemElements"><a class="morelink" onclick="hst('methrebuildItemElements')">More...</a></span> <span class="details" id="methrebuildItemElements">This method is automatically called when replacing the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> value,or when changing the value of <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a> or <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>.</span><div class="details" id="dmethrebuildItemElements"><p>This uses <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> to determine the category for an item data.That string is used to look up a template in <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>.The resulting template (which is also a Panel) is copied, added to this panel,and its <a href="../symbols/Panel.html#itemIndex" class="linkProperty">itemIndex</a> is set to its index in that Array.That new child Panel is then data-bound to that Array item by setting its <a href="../symbols/Panel.html#data" class="linkProperty">data</a>.<p>If <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> is null, this method just removes all elements from this panel.Actually, if this Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is "Spot", "Auto", or "Link", the very first elementis always kept by this method.Also, if this Panel type is "Table", and if the first element is a "TableRow" or "TableColumn" Panelwhose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a> property is set to true, that first element will be kept too.That is useful for defining literal TableRow headers in Table panels, when the header informationis not kept as the first item in the itemArray.<p>It is wasteful to call this method after making some model data changes.It is better to call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>, <a href="../symbols/Model.html#addArrayItem" class="linkMethod">Model.addArrayItem</a>,<a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>, or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>, or other model methods.Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="remove">
                <td class="name">
                  
                  <div class="name">
                    remove(element)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Removes a GraphObject from this Panel's list of elements.<span class="nodetails" id="xmethremove"><a class="morelink" onclick="hst('methremove')">More...</a></span> <span class="details" id="methremove"></span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
                                          
                                      </dt>
                                      <dd>A GraphObject.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeAt">
                <td class="name">
                  
                  <div class="name">
                    removeAt(idx)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Removes an GraphObject from this Panel's list of elements at the specified index.<span class="nodetails" id="xmethremoveAt"><a class="morelink" onclick="hst('methremoveAt')">More...</a></span> <span class="details" id="methremoveAt"></span>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeColumnDefinition">
                <td class="name">
                  
                  <div class="name">
                    removeColumnDefinition(idx)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Removes the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethremoveColumnDefinition"><a class="morelink" onclick="hst('methremoveColumnDefinition')">More...</a></span> <span class="details" id="methremoveColumnDefinition"></span><div class="details" id="dmethremoveColumnDefinition"><p>If this Panel is not a Table Panel, this method does nothing.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the non-negative zero-based integer row index.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="removeRowDefinition">
                <td class="name">
                  
                  <div class="name">
                    removeRowDefinition(idx)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Removes the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethremoveRowDefinition"><a class="morelink" onclick="hst('methremoveRowDefinition')">More...</a></span> <span class="details" id="methremoveRowDefinition"></span><div class="details" id="dmethremoveRowDefinition"><p>If this Panel is not a Table Panel, this method does nothing.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{number}</span> <b>idx</b>
                                          
                                      </dt>
                                      <dd>the non-negative zero-based integer row index.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="updateTargetBindings">
                <td class="name">
                  
                  <div class="name">
                    updateTargetBindings(srcprop)
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Re-evaluate all data bindings on this panel,in order to assign new property values to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in this visual treebased on this object's <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property values.<span class="nodetails" id="xmethupdateTargetBindings"><a class="morelink" onclick="hst('methupdateTargetBindings')">More...</a></span> <span class="details" id="methupdateTargetBindings"></span><div class="details" id="dmethupdateTargetBindings"><p>This method does nothing if <a href="../symbols/Panel.html#data" class="linkProperty">data</a> is null.This method also will not detect changes in JavaScript Arrays -- you may need to replacethe <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> with a new Array, or else call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{string=}</span> <b>srcprop</b>
                                          
                                      </dt>
                                      <dd>An optional source data property name:  when provided, only evaluates those <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s that use that particular property;  when not provided or when it is the empty string, all bindings are evaluated.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Methods borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#bind" class="linkMethod">bind</a>, <a href="../symbols/GraphObject.html#getDocumentAngle" class="linkMethod">getDocumentAngle</a>, <a href="../symbols/GraphObject.html#getDocumentPoint" class="linkMethod">getDocumentPoint</a>, <a href="../symbols/GraphObject.html#getDocumentScale" class="linkMethod">getDocumentScale</a>, <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">getLocalPoint</a>, <a href="../symbols/GraphObject.html#isContainedBy" class="linkMethod">isContainedBy</a>, <a href="../symbols/GraphObject.html#isVisibleObject" class="linkMethod">isVisibleObject</a>, <a href="../symbols/GraphObject.html#setProperties" class="linkMethod">setProperties</a></dd>
                </dl>
                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                
                <h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Panel.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                        <tr id="Auto">
                            <td class="name">
                                <div class="name">
                                Auto
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> resizes the main element to fit around the other elements;the main element is the first GraphObject with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true,or else the first GraphObject if none have that property set to true.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Grid">
                            <td class="name">
                                <div class="name">
                                Grid
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is used to draw regular patterns of lines.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Horizontal">
                            <td class="name">
                                <div class="name">
                                Horizontal
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> lays out the elements horizontally withtheir <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property dictating their alignment on the Y-axis.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Link">
                            <td class="name">
                                <div class="name">
                                Link
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is used for <a href="../symbols/Link.html" class="linkConstructor">Link</a>s and adornments that act as <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Position">
                            <td class="name">
                                <div class="name">
                                Position
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>The default <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges each element according to their <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a>.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Spot">
                            <td class="name">
                                <div class="name">
                                Spot
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges GraphObjects about a main element using the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> properties;the main element is the first GraphObject with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true,or else the first GraphObject if none have that property set to true.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Table">
                            <td class="name">
                                <div class="name">
                                Table
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges GraphObjects into rows and columns;set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a> properties on each element.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="TableColumn">
                            <td class="name">
                                <div class="name">
                                TableColumn
                                
                                    <span class="since" title="since">1.1</span>
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Organizational Panel type that is only valid inside of a Table panel;This Panel ignores its angle and scale, and does not  have a meaningful size on its own,it is only an organizational container for other elements of a Panel.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="TableRow">
                            <td class="name">
                                <div class="name">
                                TableRow
                                
                                    <span class="since" title="since">1.1</span>
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Organizational Panel type that is only valid inside of a Table panel;This Panel ignores its angle and scale, and does not  have a meaningful size on its own,it is only an organizational container for other elements of a Panel.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Vertical">
                            <td class="name">
                                <div class="name">
                                Vertical
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> lays out the elements vertically withtheir <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property dictating their alignment on the X-axis.
                            

                </div>
                            </td>
                        </tr>
                    
                        <tr id="Viewbox">
                            <td class="name">
                                <div class="name">
                                Viewbox
                                
                                
                                    <span class="light">{EnumValue}</span>
                                
                                </div>
               </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> rescales a single GraphObject to fit inside the paneldepending on the element's <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> property.
                            

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
